<template>
  <div class="LoginViewContainer">
    <p class="text">
      <span class="title">账号：</span>
      <el-input placeholder="请输入账号" v-model="username" clearable>
      </el-input>
    </p>
    <p class="text">
      <span class="title">密码：</span>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
    </p>
    <p class="text">
      <el-radio class="radio" v-model="radio" label="user">学生</el-radio>
      <el-radio class="radio" v-model="radio" label="admin">管理员</el-radio>
    </p>
    <p class="text">
      <el-button type="primary" @click="loginHandle">登录</el-button>
      <el-button @click="toRegister">立即注册</el-button>
    </p>
  </div>
</template>

<script>
import { login } from "@/utils/api";
export default {
  data() {
    return {
      username: "",
      password: "",
      radio: "user", // radio为 1时，是学生登录
    };
  },
  methods: {
    async loginHandle() {
      if (!this.username || !this.password) {
        this.$message.error("账号密码不能为空");
        return;
      }
      try {
        let res = await login({
          username: this.username,
          password: this.password,
          type: this.radio,
        });
        console.log(res);
        this.$message.success(res.message);
        await sessionStorage.setItem("uid", res.uid);
        await sessionStorage.setItem("username", res.username);
        await sessionStorage.setItem("avatar", res.avatar);
        await sessionStorage.setItem("type", this.radio);
        await sessionStorage.setItem("token", res.token);
        this.$router.push({ path: "/home/index" });
      } catch (err) {
        console.log(err);
        this.$message.error(err.message);
      }
    },
    toRegister() {
      this.$router.push({ path: "/register" });
    },
  },
};
</script>

<style lang="less" scoped>
.LoginViewContainer {
  .text {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    letter-spacing: 1.1px;
  }
}
::v-deep(.el-input) {
  width: 300px;
}

.submit {
  margin: 10px;
}
</style>
